<template>
    <div class="box" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="正在加载页面，请稍后...">
        <div class="interspace">
            <div class="space_box">
                <div style="background-color: red;width: 100px;height:100px;z-index: 10;position: relative;">
                    <img src="../../assets/bg.jpg" style="width: 100%;height: 100%;">
                </div>
                <div style="background-color: green;width: 140px;height:140px;margin-top: -40px;">
                    <img src="../../assets/b1.png" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="space_item">
                <div class="sp_item_box">
                    <img src="../../assets/bg.jpg" style="width: 100%;height: 300px;opacity: 0.5;">
                    <div class="sp_item_poit">
                        <div style="background-color: #FFFFFF;width: 80px;height: 80px;padding: 2px;">
                            <img :src="user.src" style="width: 80px;height: 80px;" />
                        </div>
                        <div>
                            <div>{{ user.name }}</div>
                            <div>{{ user.message }}</div>
                        </div>
                    </div>
                </div>
                <!-- 开始 -->
                <div class="space_ks">
                    <!-- 输入 -->
                    <div class="spact_input">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="input2" @focus="handletreaClick"
                            @blur="handlechange"></el-input>
                        <div class="spact_item">
                            <div>
                                <i class="el-icon-camera"></i>
                            </div>
                            <div>
                                <i class="el-icon-paperclip"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 设置 -->
                    <div class="spact_setielts" v-if="setitleshow == true">
                        <div class="setitles">
                            <div>😊</div>
                            <div>@</div>
                            <div>#</div>
                        </div>
                        <div class="setitles">
                            <div><img src="../../assets/qq.png" alt=""></div>
                            <div
                                style="color: #80796c;font-size: 14px;font-weight: 500;border-left:1px solid #ede8d1 ;margin: 0 10px;">
                                可见范围：{{ range }}<i class="el-icon-arrow-down"></i>
                            </div>
                            <div>
                                <el-button
                                    style="background-color: #e6b85c;color: #FFFFFF;padding: 5px 20px;">发表</el-button>
                            </div>
                        </div>
                    </div>

                    <!-- <el-input class="spact_input"></el-input> -->
                </div>
                <div class="qjsetile" style="background-color: #fffcf4;"></div>
            </div>
            <div class="space_box"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            user: {},
            input2: '',
            range: '所有人可见',
            setitleshow: false,
            list: [132, 25, 84, 564, 7548, 234324]
        }
    },
    mounted() {
        // 获取头像
        this.getUser()
        // 加载时长
        this.setLoading()
        const is = 2
        const listd = this.list.map((item) => ({
            item: item + is
        }))
        const lists = this.list.map((item) => 
            item +is
        )
        console.log(listd, lists, this.list, "shuju");
    },
    methods: {
        getUser() {
            this.user = JSON.parse(localStorage.getItem('User'))
        },
        setLoading() {
            setTimeout(() => {
                this.loading = false
            }, 2000)
        },
        handletreaClick() {
            this.setitleshow = true
        },
        handlechange() {
            console.log("点击了");
            this.setitleshow = false
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-loading-spinner i {
    color: #000000;
    font-size: 24px;
}

::v-deep .el-loading-spinner .el-loading-text {
    color: #000000;
}

::v-deep .el-textarea__inner {
    border: none;
}


.interspace {
    display: flex;

    .space_box {
        width: 24%;
        border: 1px solid green;
        min-height: calc(100vh - 40px);
    }

    .space_item {
        width: 52%;
        border: 1px solid pink;

        .sp_item_box {
            position: relative;

            .sp_item_poit {
                position: absolute;
                bottom: -10px;
                width: 100%;
                height: 84px;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                color: #000000;
                font-family: '黑体';
                font-weight: 600;

                div {
                    margin-left: 10px;
                }
            }
        }

        .space_ks {
            margin-top: 20px;
            border: 1px solid pink;

            .spact_input {
                display: flex;

                .spact_item {
                    display: flex;
                    background-color: #faf7e6;

                    div {
                        width: 40px;
                        border-left: 1px solid #ebe3bc;
                        height: 100%;
                        text-align: center;
                        height: 74px;
                        line-height: 74px;
                        font-size: 20px;
                    }
                }
            }

            .spact_setielts {
                border-top: 1px solid #ebe3bc;
                display: flex;
                justify-content: space-between;
                padding: 5px 0;

                .setitles {
                    display: flex;
                    align-items: center;

                    div {
                        padding: 0 5px;
                        cursor: pointer;
                        font-size: 16px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>